<script setup lang="ts">
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vitepress';
import { NavItem, IObject } from '@/shared/@types/interface';
import { useCommonStore } from '@/stores/common';
import HeaderNav from './ONav.vue';
import OSearch from './OSearch.vue';
import SearchIcon from '~icons/app/search.svg';
import XIcon from '~icons/app/x.svg';
import MenuIcon from '~icons/app/menu.svg';
import MoonLight from '~icons/app/sun.svg';
import MoonDark from '~icons/app/moon-light.svg';
import IconDown from '~icons/app/icon-down.svg';
import OIcon from './OIcon.vue';

const router = useRouter();
const useCommon = useCommonStore();
const { t, locale } = useI18n();
const navItems = computed(() => {
  return [
    {
      id: 'install',
      label: t('nav.install'),
      path: 'install',
    },
    {
      id: 'tutorials',
      label: t('nav.tutorials'),
      path: 'tutorials',
    },
    {
      id: 'docs',
      label: t('nav.docs.title'),
      path: 'docs',
      children: [
        {
          id: 'mindspore',
          label: t('nav.docs.mindspore'),
        },
        {
          id: 'mindspore_lite',
          label: t('nav.docs.mindspore_lite'),
        },
        // {
        //   id: 'ecosystem_tools',
        //   label: t('nav.docs.ecosystem_tools.title'),
        //   path: '',
        //   children: [
        //     {
        //       id: 'mindinsight',
        //       label: t('nav.docs.ecosystem_tools.mindinsight'),
        //     },
        //     {
        //       id: 'mindspore_hub',
        //       label: t('nav.docs.ecosystem_tools.mindspore_hub'),
        //     },
        //   ],
        // },
      ],
    },
    { id: 'api', label: t('nav.api'), path: 'api' },
    {
      id: 'community',
      label: t('nav.community.title'),
      path: 'community',
      children: [
        {
          id: 'contribution_guide',
          label: t('nav.community.contribution_guide'),
          path: '',
        },
        { id: 'governance', label: t('nav.community.governance'), path: '' },
        { id: 'forum', label: t('nav.community.forum'), path: '' },
        { id: 'developer', label: t('nav.community.developer'), path: '' },
        {
          id: 'community_activities',
          label: t('nav.community.community_activities'),
          path: '',
        },
      ],
    },
    {
      id: 'resources',
      label: t('nav.resources.title'),
      path: 'resources',
      children: [
        { id: 'overview', label: t('nav.resources.overview'), path: '' },
        {
          id: 'courses_certification',
          label: t('nav.resources.courses_certification'),
          path: '',
        },
        { id: 'hub', label: t('nav.resources.hub'), path: '' },
      ],
    },
    {
      id: 'news',
      label: t('nav.news.title'),
      children: [
        {
          id: 'version_releases',
          label: t('nav.news.version_releases'),
          path: '',
        },
        {
          id: 'blogs',
          label: t('nav.news.blogs'),
          path: '',
        },
        { id: 'news', label: t('nav.news.news'), path: '' },
        { id: 'activities', label: t('nav.news.activities'), path: '' },
      ],
    },
    { id: 'security', label: t('nav.security'), path: 'security' },
    {
      id: 'code',
      label: t('nav.code.title'),
      path: 'code',
      children: [
        {
          id: 'gitee',
          label: t('nav.code.gitee'),
          path: 'https://gitee.com/mindspore/mindspore',
        },
        {
          id: 'github',
          label: t('nav.code.github'),
          path: 'https://github.com/mindspore-ai/mindspore',
        },
      ],
    },
  ];
});
const activeNav = ref<string>();
const handleNavClick = (item: NavItem) => {
  activeNav.value = item.path;
  // console.log('handleNavClick :>> ', activeNav.value);
};

const goHome = () => {
  activeNav.value = '';
  router.go(`/${useCommon.language}/home/`);
};

const isSearch = ref(true);
const handleSearch = () => {
  isSearch.value = false;
};
const searchClick = (item: string) => {
  isSearch.value = true;
  mSearch.value = false;
  router.go(`/${useCommon.language}/search/`);
};
const clearSearch = (flag: boolean) => {
  if (flag) {
    isSearch.value = true;
    useCommon.search = '';
    mSearch.value = false;
  }
};

// 移动端菜单
const isMobileMenu = ref(false);
let { body } = document;
const mobileMenuPanel = () => {
  isMobileMenu.value = !isMobileMenu.value;
  body.classList.toggle('overflow');
};

const childList = ref<NavItem | any>([]);
const handleMenuLayer = (e: any) => {
  if (e.target.className !== 'mobile-menu-side') {
    if (childList.value.length === 0) {
      isMobileMenu.value = false;
      body.classList.toggle('overflow');
    }
  }
};

// 移动端事件
const goMobile = (item: NavItem) => {
  if (item.hasOwnProperty('children')) {
    childList.value = item.children;
  } else {
    childList.value = [];
    isMobileMenu.value = false;
    router.go(`/${language.value}/${item.path}/`);
  }
  activeNav.value = item.id;
};

const goMobileList = (item: NavItem) => {
  isMobileMenu.value = false;
  body.classList.toggle('overflow');

  if (item.path.startsWith('https:')) {
    window.open(item.path, '_blank');
  } else {
    router.go(`/${language.value}/${item.path}/`);
  }
};

// theme 主题事件
const themeStyle = computed(() => (useCommon.theme === 'light' ? true : false));
// 主题切换
let getThemeMode = useCommon.theme;
const changeTheme = () => {
  getThemeMode = useCommon.theme;
  if (getThemeMode === 'light') {
    enableDarkMode();
  } else {
    disableDarkMode();
  }
  body.style.setProperty('data-theme', themeStyle ? 'light' : 'dark');
};
// 深色
const enableDarkMode = () => {
  document.body.className = '';
  useCommon.theme = 'dark';
  localStorage.setItem('mindspore-theme', useCommon.theme);
  document.body.classList.add(useCommon.theme);
};
// 浅色
const disableDarkMode = () => {
  document.body.className = '';
  useCommon.theme = 'light';
  localStorage.setItem('mindspore-theme', useCommon.theme);
  document.body.classList.add(useCommon.theme);
};

if (getThemeMode === 'dark') enableDarkMode();
window
  .matchMedia('(prefers-color-scheme: dark)')
  .addListener((e) => (e.matches ? enableDarkMode() : disableDarkMode()));

// 选择语言;
const language = computed(() => useCommon.language);
const options = ref([
  { value: 'zh', label: '中文' },
  { value: 'en', label: 'English' },
]);
const langAttr = ref<string>('中文');
// 选择语言
const handleCommand = (command: IObject): void => {
  langAttr.value = command.label;
  localStorage.setItem('mindspore-lang', command.value);
  locale.value = command.value;
  const pathname = window.location.pathname;
  const newHref = pathname.replace(`/${language.value}/`, `/${command.value}/`);
  useCommon.setLanguage(command.value);
  router.go(newHref);
};

// 根据 url 切换中英文
const pathlang = window.location.pathname.split('/')[1];
if (pathlang) {
  useCommon.language = pathlang;
  localStorage.setItem('mindspore-lang', pathlang);
  locale.value = pathlang;
}

const mSearch = ref(false);
const mSearchClick = () => {
  mSearch.value = true;
};
</script>
<template>
  <div class="app-header">
    <div class="app-header-body">
      <div class="header-logo" v-if="!mSearch">
        <img
          class="header-logo-img"
          alt="mindspore logo"
          src="../assets/logo.png"
          @click="goHome"
        />
      </div>
      <div class="mobile-menu-icon" @click="mobileMenuPanel" v-if="!mSearch">
        <o-icon v-if="!isMobileMenu" class="menu-mo"
          ><menu-icon></menu-icon
        ></o-icon>
        <o-icon v-else class="menu-mo"><x-icon></x-icon></o-icon>
      </div>
      <div class="header-content">
        <div class="header-nav">
          <header-nav
            :nav-items="navItems"
            @nav-click="handleNavClick"
          ></header-nav>
        </div>
        <div v-if="!isSearch">
          <o-search
            @search-click="searchClick"
            @clear-search="clearSearch"
          ></o-search>
        </div>
        <div v-if="isSearch" class="header-tool">
          <!-- 主题切换 -->
          <div class="header-tool-theme" @click="changeTheme">
            <o-icon class="icon">
              <moon-dark v-if="themeStyle"></moon-dark>
              <moon-light v-else></moon-light>
            </o-icon>
          </div>
          <!-- 中英文切换 -->
          <div class="language">
            <el-dropdown
              popper-class="language-change"
              @command="handleCommand"
            >
              <span class="el-dropdown-link">
                {{ language == 'zh' ? '中文' : 'English' }}
                <o-icon><icon-down></icon-down></o-icon>
              </span>

              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="(item, key) in options"
                    :key="key"
                    :class="{ active: language === item.value }"
                    :command="item"
                    >{{ item.label }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <!-- 搜索 -->
          <div class="header-tool-search" @click="handleSearch">
            <o-icon class="icon"><search-icon></search-icon></o-icon>
          </div>
        </div>
      </div>
      <div class="mobile-search-icon" v-if="!mSearch" @click="mSearchClick">
        <o-icon class="icon"><search-icon></search-icon></o-icon>
      </div>
      <div class="mobile-search" v-if="mSearch">
        <o-search
          @search-click="searchClick"
          @clear-search="clearSearch"
        ></o-search>
      </div>

      <!-- 移动端菜单 -->
      <teleport to="#app">
        <div
          class="mobile-menu"
          :class="{ active: isMobileMenu }"
          @click="handleMenuLayer($event)"
        >
          <div class="mobile-menu-side">
            <div class="mobile-nav">
              <a
                v-for="item in navItems"
                :key="item.id"
                class="link"
                :class="[activeNav === item.id ? 'active' : '']"
                @click.stop="goMobile(item)"
                >{{ item.label }}</a
              >
            </div>
            <div class="mobile-tools"></div>
          </div>
          <div v-if="childList.length > 0" class="mobile-menu-content">
            <div class="mobile-menu-list">
              <a
                v-for="item in childList"
                :key="item.id"
                class="link"
                @click="goMobileList(item)"
                >{{ item.label }}</a
              >
            </div>
          </div>
        </div>
      </teleport>
    </div>
  </div>
</template>
<style lang="scss">
.overflow {
  overflow: hidden;
}
.el-dropdown-link {
  display: flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  color: var(--theme-title);
  .o-icon {
    font-size: 24px;
  }
}
.app-header {
  height: 80px;
  position: fixed;
  z-index: 102;
  top: 0;
  width: 100%;
  background: var(--theme-card-bg);
  box-shadow: 0 3px 8px 0 rgba(var(--theme-black-rgb), 0.05);
  &-body {
    display: flex;
    align-items: center;
    width: 1416px;
    margin: 0 auto;
    height: 100%;
  }

  .header-logo {
    overflow: hidden;
    margin-right: 40px;
    cursor: pointer;
    &-img {
      height: 40px;
    }
  }
  .mobile-menu-icon {
    display: none;
    .menu-mo {
      font-size: 20px;
      color: var(--theme-title);
    }
  }
  .mobile-search {
    width: 100%;
  }
  .mobile-search-icon {
    display: none;
  }
  .header-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 100%;
    .header-nav {
      height: 100%;
      display: flex;
      flex: 1;
    }
    .header-search {
      width: 240px;
    }
    .header-tool {
      display: grid;
      gap: 20px;
      grid-template-columns: auto auto auto;
      align-items: center;
      .lang {
        color: var(--theme-title);
        letter-spacing: 0.08em;
        font-size: 16px;
      }
      &-search {
        cursor: pointer;
      }
      &-theme {
        cursor: pointer;
      }
    }
    .icon {
      font-size: 22px;
      color: var(--theme-title);
    }
  }
}

.mobile-menu {
  width: 100%;
  position: fixed;
  left: 0;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 0;
  visibility: hidden;
  border-top: 1px solid var(--theme-cross-line);
  background: var(--theme-opacity);
  z-index: 111;
  display: none;
  top: 48px;
  height: 100%;
  &.active {
    opacity: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    visibility: visible;
    @media screen and (min-width: 1100px) {
      opacity: 0;
    }
    .mobile-menu-side,
    .mobile-menu-content {
      left: 0;
      opacity: 1;
    }
  }
  &-side {
    left: -100%;
    background: var(--theme-page-bg);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    color: var(--theme-title);
    min-width: 164px;
    opacity: 0;
    position: relative;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    overflow-y: scroll;
    .mobile-nav {
      .link {
        display: block;
        font-size: 12px;
        line-height: 48px;
        color: var(--theme-title);
        padding: 0 16px;
        position: relative;
        cursor: pointer;
        &::after {
          width: 0;
          height: 2px;
          background: transparent;
          content: '';
          position: absolute;
          left: 16px;
          display: block;
          transition: all 0.3s;
          bottom: 0;
        }
        &.active {
          background: var(--theme-card-bg);
          &::after {
            width: 24px;
            background: var(--theme-active);
          }
        }
      }
    }
  }
  &-content {
    flex: 1;
    background: var(--theme-card-bg);
    .mobile-menu-list {
      display: grid;
      padding: 0 16px;
      .link {
        line-height: 40px;
        font-size: 12px;
        font-weight: normal;
        color: var(--theme-text);
        cursor: pointer;
        &:last-child {
          border-bottom: 1px solid var(--theme-cross-line);
        }
      }
    }
  }
}
.language {
  .el-dropdown {
    color: var(--theme-title);
    cursor: pointer;
    &-link {
      color: var(--theme-title);
    }
  }
}
.language-change.el-dropdown__popper.el-popper[role='tooltip'] {
  background: var(--theme-card-bg) !important;
  box-shadow: 0px 3px 8px 0px var(--theme-shadow) !important;
  border: 0 none;
  .el-dropdown-menu {
    background: none;
    padding: 0 20px;
    &__item {
      line-height: 50px;
      border-bottom: 1px solid var(--theme-cross-line);
      color: var(--theme-text);
      padding: 0;
      background: none !important;
      &:last-child {
        border-bottom: none;
      }
      &:hover {
        color: var(--theme-active);
      }
      &.active {
        color: var(--theme-active);
      }
    }
  }
  .el-popper__arrow {
    display: none;
  }
}

.el-dropdown-menu__item {
  justify-content: center;
}
header {
  background: var(--theme-card-bg);
  height: 80px;
}
@media screen and (min-width: 768px) and (max-width: 1440px) {
  .app-header {
    &-body {
      width: 1080px;
      padding: 0 16px;
      justify-content: space-between;
    }
  }
}
@media screen and (max-width: 1100px) {
  header {
    height: 48px;
  }
  .app-header {
    height: 48px;
    &-body {
      width: 100%;
      padding: 0 16px;
      justify-content: space-between;
    }
    .header-logo-img {
      height: 32px;
      margin: 0;
    }
    .mobile-menu-icon {
      display: block;
      order: -1;
      color: var(--theme-white);
    }
    .header-content {
      display: none;
    }
    .mobile-search-icon {
      display: block;
      .icon {
        font-size: 20px;
        color: var(--theme-text);
      }
    }
  }
}
.dark {
  .icon {
    color: var(--theme-title);
  }
}
</style>
